<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=j, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- js:jQuery(dom驱动)、vue（数据驱动）、 react、angular -->

    <div id="app">
        {{stuobj.name}} {{stuobj.age}}

        {{array[1]}}

        <b v-bind:id="id+'ok'">ok</b>
        <hr />
        <span v-if="blo">开</span>
        <span v-if="!blo">关</span>
        <hr>

        <b v-if="num==1">1</b>
        <b v-else>2</b>
        <hr>

        <p v-show="show">显示</p>

        <hr>

        <ul>

            <li v-for="(item,i) in students">
                {{i+1}} {{item.name}} {{item.age}}
                <span v-if="item.age<18">未成年</span>
                <span v-else>成年</span>
            </li>
        </ul>

        <hr>

        <ul>
            <li v-for="(item,i)  in 5">
                {{i}}{{item}}

            </li>
        </ul>

        <hr>
        <ul>
            <li v-for="(item,key,i) in obj">
                {{item}}--{{key}}---{{i}}

            </li>
        </ul>


        <hr />
        <section :class="{active:ok,font:ok2}">class-对象写法</section>

        <section :class="[ok?'active':'','font']">class-数组</section>

        <hr />

        <section :style="{color: color}">style 对象形式</section>

        <section :style="styleObj">ok</section>

        <section :style="[{color:styleObj.color}]">ok2</section>


        <section :style="[styleObj]">ok3</section>


    </div>
    <!-- 嗨行 -->


    <script src="js/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app", // element绑定元素
            data: { // 绑定数据
                styleObj: {
                    color: 'pink',
                    background: '#dedede'
                },
                color: 'blue',
                ok: false,
                ok2: true,
                stuobj: { // 对象
                    name: "jack001",
                    age: 18
                },
                array: ["tom", "lili"],
                id: 100,
                blo: true,
                num: 2,
                show: false,
                obj: {
                    a: 100,
                    b: "ok"
                },
                students: [
                    {
                        name: "jack",
                        age: 15
                    },
                    {
                        name: "tom",
                        age: 20
                    },
                    {
                        name: "lucy",
                        age: 22
                    }
                ]
            }

        })

        vm.id = 200;



    </script>
</body>

</html>